<template>
<!--
  整体思路
  第一部分：首先是针对两个标题，显示一个隐藏一个 在标题部分给了 变量 只需要其中一个另外一个不等于它  v-show="!show"
  第二部分：我们需要通过点击第一个标题编辑部分返回到主页上显示，给编辑添加点击函数（代码较多业务） tis.v-show=ture 显示
  第三部分：我们想要两个标题同步整体内容，用v-model双向数据绑定，也可同时使用第一个标题的表达式，但是后期需要修改内容不好维护，所以定义两个表达式接收
  第四部分：针对取消和确定来返回主页面初始化， 注意是按钮需要点击，之前写过那么只需要再=false，即可返回初始化页面
           确认按钮因为后期需要修改的内容需要更新到第一个标题上，所以用点击函数，先点击后返回主页面v-show=false，接着再把标题二修改后的内容给标题一接收即可
  第五部分：改善了一点小细节，加了去首尾空白符.trim以及输入的标题不为空因为是双向绑定数据所以要用&&判断两个值 

 -->
  <div>
    <!-- 标题部分 -->
    <h1 class="title" v-show="!show">
    {{titleA}}
   <span class="tag"> {{tag}}</span>
      <a class="edit-btn" @click="add">编辑</a>
    </h1>


    <!-- 编辑内容 -->
    <div v-show="show">
      <div class="input-group ">标题：<input type="text"  v-model.trim="titleB">
      </div>     
      <div class="input-group">
        频道：<select v-model.trim="tagB">
          <option value="前端">前端</option>
          <option value="测试">测试</option>
          <option value="Java">Java</option>
        </select>
      </div>
      <div class="operation">
        <button class="cancel" @click="show=false">取消</button>
        <button class="confirm" @click="confirm">确认</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      show:false,
      titleA:"朝花夕拾",
      tag:"前端",
      titleB:"",
      tagB:""
    }
  },
  methods:{
add(){
  this.show=true
  this.titleB=this.titleA
  this.tagB=this.tag
},
confirm(){
  if (this.titleA&&this.titleB==="") {
    alert("不能为空哦😎")
    return
   }
    this.show=false
    this.titleA=this.titleB
    this.tag=this.tagB
   
},
},

  }

</script>

<style>
.title {
  display: flex;
  align-items: center;
}

.tag {
  margin-left: 8px;
  padding: 3px 6px;
  border-radius: 8px;
  background-color: green;
  font-size: 0.6em;
  color: #fff;
}

.edit-btn {
  margin-left: 32px;
  font-size: 0.8em;
  color: lightskyblue;
}

.input-group {
  margin-top: 16px;
  font-size: 28px;
}

.input-group input,
.input-group select {
  width: 300px;
  border-color: #ddd;
  font-size: 28px;
}

.operation {
  margin-top: 16px;
}

.cancel {
  margin-left: 85px;
  background-color: #ddd;
}

.cancel,
.confirm {
  padding: 8px 24px;
  border: 0;
  border-radius: 4px;
}

.confirm {
  margin-left: 16px;
  background-color: #006699;
  color: #fff;
}
</style>
